<template>
  <div>
    <el-tabs :tab-position="tabPosition">
      <el-tab-pane label="未完成帮助">
        <div class="www">
          <el-card class="box-card-1" v-for="(item, index) in helps1">
            <div slot="header" class="clearfix">
              <span>帮帮我</span>
            </div>
            <div class="text item">求助类型：{{ item.type }}</div>
            <div class="text item">求助人电话：{{ item.phone }}</div>
            <div class="text item">地点：{{ item.location }}</div>
            <div class="text item">求助描述：{{ item.detail }}</div>
            <el-button
              id="bbbb"
              type="danger"
              round
              icon="el-icon-delete"
              @click="cancelHelp(item)"
              >取消帮助</el-button
            >
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已完成帮助">
        <div class="www">
          <el-card class="box-card-1" v-for="(item, index) in helpInfo1">
            <div slot="header" class="clearfix">
              <span>帮帮我</span>
            </div>
            <div class="text item">求助类型：{{ item.type }}</div>
            <div class="text item">求助人电话：{{ item.phone }}</div>
            <div class="text item">地点：{{ item.location }}</div>
            <div class="text item">求助描述：{{ item.detail }}</div>
          </el-card>
        </div>
      </el-tab-pane>
    </el-tabs>
    <router-view></router-view>
  </div>
</template>
<script>
import { Myhelp } from "../services/help";
import { Myhelp1 } from "../services/help";
import { cancelHelp } from "../services/help";
export default {
  data() {
    return {
      tabPosition: "left",
      helps1: [],
      helpInfo1: [],
    };
  },
  methods: {
    cancelHelp: function (item) {
      this.helper_id = 0;
      this.helpid = item.helpid;
      console.log(554874)
      console.log(this.helpid)
      this.$confirm("你确定取消帮助吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((res) => {
          cancelHelp({ helpid: this.helpid,helper_id:this.helper_id }).then(
            (res) => {
              Myhelp({ helper_id: this.$store.state.account.user.id }).then(
                (res) => {
                  this.helps1 = res.data.result;
                }
              );
              this.$message({
                type: "success",
                message: "取消成功!",
              });
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已关闭",
          });
        });
    },
  },
  mounted: function () {
    Myhelp({ helper_id: this.$store.state.account.user.id }).then((res) => {
      this.helps1 = res.data.result;
    });
  },
  created: function () {
    Myhelp1({ helper_id: this.$store.state.account.user.id }).then((res) => {
      this.helpInfo1 = res.data.result;
    });
  },
};
</script>


<style scoped>
.box-card-1 {
  width: 400px;
  border-radius: 30px;
  background-color: rgb(243, 233, 227);
  width: 350px;
  height: 400px;
  border: 1px solid #f38d74;
  margin: 20px;
  margin-left: 20px;
}
.text {
  font-size: 15px;
  font-weight: bold;
  color: #632405;
}
.item {
  margin-bottom: 20px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
#bbbb {
  text-align: center;
  margin: 75px;
  margin-left: 100px;
  position: fixed;
}
.www {
  display: flex;
  flex-wrap: wrap;
}
.el-card ::v-deep .el-card__header {
  padding: 20px 20px;
  background-color: rgb(194, 70, 48);
  color: rgb(245, 242, 239);
  font-size: 25px;
  font-weight: bold;
}
.www {
  display: flex;
  flex-wrap: wrap;
}
</style>